<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Mocha Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../node_modules/mocha/mocha.css" />
    <style type="text/css">
      html * {
        box-sizing: border-box;
      }
    </style>
    <link rel="stylesheet" href="../../dist/css/datepicker.css" />
  </head>
  <body>
    <div id="mocha"></div>

    <div id="test-container"></div>

    <script src="../../node_modules/mocha/mocha.js"></script>
    <script src="../../node_modules/unexpected/unexpected.js"></script>
    <script src="../../node_modules/sinon/pkg/sinon.js"></script>
    <script src="../../node_modules/simulant/dist/simulant.umd.js"></script>

    <script class="mocha-init">
      mocha.setup('bdd');
      mocha.checkLeaks();
      //
      // mocha.bail();

      window.testContainer = document.getElementById('test-container');
    </script>
    <script src="./_utils/date.js"></script>
    <script src="./_utils/dom.js"></script>
    <script class="setup">
      // patch simulant's bug that the default value of keyboard events'
      // modifier key properties are not set (They should be false)
      const keyboardEventTypes = ['keydown', 'keypress', 'keyup'];
      const modifierKeyDefaults = {
        ctrlKey: false,
        altKey: false,
        shiftKey: false,
        metaKey: false,
      };
      const fireOrinial = simulant.fire;
      simulant.fire = function fire(node, type, originalParams) {
        const params = keyboardEventTypes.indexOf(type) === -1
          ? originalParams
          : Object.assign({}, modifierKeyDefaults, originalParams);
        return fireOrinial.call(simulant, node, type, params)
      };

      /* eslint-disable no-undef, no-unused-vars */
      var expect = weknowhow.expect;
      var dateValue = dateUtils.dateValue;
      var parseHTML = domUtils.parseHTML;
      var isVisible = domUtils.isVisible;
      var lastItemOf = arr => arr[arr.length - 1];

      var createDP = (el, options) => {
        const dp = new Datepicker(el, options);
        return {dp, picker: dp.picker.element};
      };
      var createDRP = (el, options) => {
        const drp = new DateRangePicker(el, options);
        const [picker0, picker1] = drp.datepickers.map(dp => dp.picker.element);
        return {drp, picker0, picker1};
      };
      var getParts = (picker, selectors) => selectors.map(sel => picker.querySelector(sel));
      var getViewSwitch = picker => picker.querySelector('.view-switch');
      var getCells = picker => Array.from(picker.querySelectorAll('.datepicker-cell'));
      var getCellIndices = (cells, criteria) => cells.reduce((indices, cell, idx) => {
        if (typeof criteria === 'function' ? criteria(cell) : cell.matches(criteria)) {
          indices.push(idx);
        }
        return indices;
      }, []);
      var mapIndices = arr => arr.map((item, index) => index);
      var cellInfo = (cells, criteria) => cells.reduce((res, cell, idx) => {
        if (cell.matches(criteria)) {
          res.push([idx, cell.textContent]);
        }
        return res;
      }, []);

      // create <test-wrapper> custom element
      class TestWrapper extends HTMLElement {
        constructor() {
          super();

          const shadowRoot = this.attachShadow({mode: 'open'});

          const styleLink = document.createElement('link');
          styleLink.setAttribute('rel', 'stylesheet');
          styleLink.setAttribute('href', '../../dist/css/datepicker.css');
          const styleElem = document.createElement('style');
          styleElem.textContent = ':host { display: block }';

          shadowRoot.append(styleLink, styleElem, document.createElement('slot'));
        }
      }
      customElements.define('test-wrapper', TestWrapper);
    </script>
    <script src="../../dist/js/datepicker-full.js"></script>
    <script src="../../dist/js/locales/fr.js"></script>
    <script src="../../dist/js/locales/zh-CN.js"></script>
    <script src="./Datepicker/Datepicker-object.js"></script>
    <script src="./Datepicker/api-methods.js"></script>
    <script src="./mouse-operation.js"></script>
    <script src="./keyboard-operation/keyboard-operation.js"></script>
    <script src="./keyboard-operation/arrow-left.js"></script>
    <script src="./keyboard-operation/arrow-right.js"></script>
    <script src="./keyboard-operation/arrow-up.js"></script>
    <script src="./keyboard-operation/arrow-down.js"></script>
    <script src="./keyboard-operation/edit-mode.js"></script>
    <script src="./events.js"></script>
    <script src="./options/options.js"></script>
    <script src="./options/week-numbers.js"></script>
    <script src="./options/date-restrictions.js"></script>
    <script src="./options/format.js"></script>
    <script src="./options/multidate.js"></script>
    <script src="./options/pick-level+view.js"></script>
    <script src="./options/buttons.js"></script>
    <script src="./options/orientation.js"></script>
    <script src="./options/before-show.js"></script>
    <script src="./options/shortcut-keys.js"></script>
    <script src="./inline-mode.js"></script>
    <script src="./DateRangePicker/DateRangePicker.js"></script>
    <script src="./DateRangePicker/api-methods.js"></script>
    <script src="./DateRangePicker/date-selection.js"></script>
    <script src="./DateRangePicker/options.js"></script>
    <script class="mocha-exec">
      mocha.run();
    </script>
  </body>
</html>
